{include file="public/layout" /}
<body class="laytp-container">
<div class="layui-card" id="search-form">
    <div class="layui-card-body">
        <form class="layui-form layui-row layui-col-space16 layui-search-admin">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline" >
                    <input type="text" name="user_name" placeholder="用户名" lay-affix="clear" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline" >
                    <input type="text" name="mobile" placeholder="手机号" lay-affix="clear" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">加入时间</label>
                <div class="layui-inline" id="laydate-rangeLinked">
                    <div class="layui-input-inline">
                        <input type="text" name="time_start" autocomplete="off" id="table-search-date-start" class="layui-input" placeholder="开始日期">
                    </div>-
                    <div class="layui-input-inline">
                        <input type="text" name="time_end" autocomplete="off" id="table-search-date-end" class="layui-input" placeholder="结束日期">
                    </div>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label"></label>
                <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
                <button type="reset" class="layui-btn layui-btn-primary">清空</button>
            </div>
        </form>
    </div>
</div>
<div class="layui-card">
	<div class="layui-card-body">
		<table class="layui-hide" id="test" lay-filter="test"></table>
	</div>
</div>
<script type="text/html" id="toolbarDemo">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm" onclick="edit(0,1)">
			添加
		</button>
		<button class="layui-btn layui-btn-sm" onclick="reload()">
			刷新数据
		</button>
		<button class="layui-btn layui-btn-sm" onclick="del()">
			批量删除
		</button>
		<button class="layui-btn layui-btn-sm" onclick="location.href='{:url('excel')}'+urlEncode(datawhere)">
			导出数据
		</button>

	</div>
</script>
<script>
	var tableIns
	var datawhere = {};
	layui.use(function(){
		var table = layui.table;
		var dropdown = layui.dropdown;
		var laydate = layui.laydate;
		var form = layui.form;

		// 创建渲染实例
		tableIns = table.render({
			elem: '#test',
			url:'{:url("index")}', // 此处为静态模拟数据，实际使用时需换成真实接口
			toolbar: '#toolbarDemo',
			defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
			height: 'full-200', // 最大高度减去其他容器已占有的高度差
			css: [ // 重设当前表格样式
				'.layui-table-tool-temp{padding-right: 145px;}'
			].join(''),
			cellMinWidth: 80,
			totalRow: true, // 开启合计行
			page: true,
			pagebar: '#test-pagebar', // 分页栏模板
			cols: [[
				{type: 'checkbox', fixed: 'left'},
				{field:'admin_id',width:80, title: 'ID', sort: true},
				{field:'user_name', width:80, title: '用户名', sort: true},
				{field:'role', width:80, title: '所属角色',totalRowText: ''},
				{field:'suppliers_id', title:'供货商ID',  width:150},
				{field:'mobile', width:80, title: '手机号'},
				{field:'add_time', width: 100, title: '加入时间'},
				{field:'last_ip', title:'最后登录ip', width: 100},
				{field:'last_login', title:'最后登录时间', width: 100},
				{fixed: 'right', title:'操作', width: 134, minWidth: 125, templet:function (d) {
						var html = '';
						html += '<a class="layui-btn layui-btn-xs" onclick="edit('+d.admin_id+')">编辑</a>';
						html += '<a class="layui-btn layui-btn-xs" onclick="del('+d.admin_id+')">删除</a>';
						return html;
					}}
			]],
			error: function(res, msg){
				console.log(res, msg)
			}
		});

		// 触发单元格工具事件
		table.on('tool(test)', function(obj){ // 双击 toolDouble
			var data = obj.data; // 获得当前行数据
			// console.log(obj)
			if(obj.event === 'edit'){
				layer.open({
					title: '编辑 - id:'+ data.user_id,
					type: 2,
					shadeClose: true,
					area: ['100%','100%'],
					scrollbar:false,
					content: '{:url("detail")}/id/'+data.user_id
				});
			}
		});

		laydate.render({
			elem: '.demo-table-search-date'
		});
		laydate.render({
			elem: '#laydate-rangeLinked',
			type: 'datetime',
			range: ['#table-search-date-start', '#table-search-date-end'],
			rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
		});
		// 搜索提交
		form.on('submit(demo-table-search)', function(data){
			var field = data.field; // 获得表单字段
			datawhere = field;
			// 执行搜索重载
			table.reload('test', {
				page: {
					curr: 1 // 重新从第 1 页开始
				},
				where: field // 搜索的字段
			});
			//layer.msg('搜索成功<br>此处为静态模拟数据，实际使用时换成真实接口即可');
			return false; // 阻止默认 form 跳转
		});
	});
	function edit(id=0,is_add=0){
		layer.open({
			title: '查看',
			type: 2,
			shadeClose: true,
			area: ['100%','100%'],
			scrollbar:false,
			content: "/admin/Admin/admin_info/admin_id/"+id+"/is_add/"+is_add
		});
	}
	function reload(){
		layui.table.reload('test', {
			where: {
				abc: 123,
				test: '新的 test1'
			},
			// scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
			// height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
			//url: '404',
			//page: {curr: 1, limit: 30} // 重新指向分页
		}, true);
	}
	function del(id){
		if(id){
			var ids = [id];
		}else{
			var checkStatus = layui.table.checkStatus('test');
			var data = checkStatus.data;
			var ids = [];
			$.each(data, function(index, value){
				//goods_ids.append(value.goods_id);
				ids.push(value.comment_id);
			});
		}
		layer.confirm('确定要删除选择的数据'+ids+'吗？', function(index){
			$.ajax({
				type: "POST",
				url: "{:url('del')}",
				data: {ids:ids},
				success: function(res){
					console.log(res);
					if(res.status){
						layer.msg('提交成功');
					}else{
						layer.msg(res.msg);
					}
					layer.close(index);
					tableIns.reload()
				}
			});
			layer.close(index);
			// 向服务端发送删除指令
		});

	}
</script>
</body>
</html>